<template>
	<div class="mpvue-picker">
		<div :class="{ pickerMask: showPicker }" @click="maskClick" catchtouchmove="true"></div>
		<div class="mpvue-picker-content" :class="{ 'mpvue-picker-view-show': showPicker }">
			<div class="mpvue-picker__hd" catchtouchmove="true">
				<div class="mpvue-picker__action" @click="showPicker = false">取消</div>
				<div class="mpvue-picker__action" @click="pickerConfirm">确定</div>
			</div>
			<picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="pickerValue"
				@change="pickerChange">
				<picker-view-column>
					<div class="picker-item" v-for="(item, index) in provinceDataList" :key="index">{{ item.name }}
					</div>
				</picker-view-column>
				<picker-view-column>
					<div class="picker-item" v-for="(item, index) in cityDataList" :key="index">{{ item.name }}</div>
				</picker-view-column>
				<picker-view-column>
					<div class="picker-item" v-for="(item, index) in areaDataList" :key="index">{{ item.name }}</div>
				</picker-view-column>
			</picker-view>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { onLoad, onShow, onPullDownRefresh } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	import { http } from '@/common/http/index';
	import { defineEmits } from 'vue';

	//默认值
	const pickerValue = ref([0, 0, 0]) as any;
	//默认值
	const pickerValueDefault = ref([0, 0, 0]) as any;

	//初始化省市区数据
	const provinceDataList = ref() as any;
	const cityDataList = ref() as any;
	const areaDataList = ref() as any;

	const get_info = async () => {
		provinceDataList.value = (await http.get('/api/v1/region')).data;
		cityDataList.value = provinceDataList.value[0].childrens;
		areaDataList.value = [{ name: '全部', id: '' }, ...(cityDataList.value[0].childrens)];
		//默认值[当前选中的]
		pickerValue.value = pickerValueDefault.value;
		isChang.value = true;
	};

	onLoad(() => {
		get_info();
	});

	const setCity = async (index) => {

		cityDataList.value = provinceDataList.value[index].childrens;
		areaDataList.value = [{ name: '全部', id: '' }, ...cityDataList.value[0].childrens];
		//默认值[当前选中的]
		pickerValue.value[1] = 0;
		pickerValue.value[2] = 0;
	};

	const setArea = async (xindex, yindex) => {
		// provinceDataList.value = (await http.get('/admin/region/getProvince')).data;
		// cityDataList.value = (await http.get('/admin/region/getCity', { params: { province_id } })).data;
		areaDataList.value = [{ name: '全部', id: '' }, ...provinceDataList.value[xindex].childrens[yindex].childrens]
		//默认值[当前选中的]
		pickerValue.value[2] = 0;
	};

	const isChang = ref(false);
	const pickerChange = (e) => {
		if (!isChang.value) return;

		let indexArr = e.detail.value;

		if (pickerValue.value[0] !== indexArr[0]) {
			//第1层滚动
			setCity(indexArr[0]);
			pickerValue.value = indexArr;
		} else if (pickerValue.value[1] !== indexArr[1]) {
			//第2层滚动
			setArea(indexArr[0], indexArr[1]);
			pickerValue.value = indexArr;
		} else if (pickerValue.value[2] !== indexArr[2]) {
			pickerValue.value = indexArr;
		}
	};



	const maskClick = () => {
		showPicker.value = false;
	};

	//确认后传递数据

	const emit = defineEmits(['onConfirm']);
	const _getName = () => {
		//provinceDataList.value[pickerValue.value[0]].name + '-' + cityDataList.value[pickerValue.value[1]].name + '-' +areaDataList.value[pickerValue.value[2]].name 
		let pcikerLabel = areaDataList.value[pickerValue.value[2]].name;
		return pcikerLabel;
	};
	const _getShengCode = () => {
		return provinceDataList.value[pickerValue.value[0]].id;
	};
	const _getShiCode = () => {
		return cityDataList.value[pickerValue.value[1]].id;
	};
	const _getQuCode = () => {
		return areaDataList.value[pickerValue.value[2]].id;
	};

	const SendCity = (emitName) => {
		let pickObj = {
			name: _getName(),
			area_id: _getQuCode(),
			city_id: _getShiCode(),
			province_id: _getShiCode(),
		};
		emit(emitName, pickObj);
	};
	const pickerConfirm = (e) => {
		showPicker.value = false;
		SendCity('onConfirm');
	};
	//导出open方法
	const showPicker = ref(false);
	const open = () => { showPicker.value = true };
	defineExpose({ open });
</script>

<style lang="scss">
	.pickerMask {
		position: fixed;
		z-index: 1000;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
	}

	.mpvue-picker-content {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		transition: all 0.3s ease;
		transform: translateY(100%);
		z-index: 3000;
	}

	.mpvue-picker-view-show {
		transform: translateY(0);
	}

	.mpvue-picker__hd {
		display: flex;
		padding: 9px 15px;
		background-color: #fff;
		position: relative;
		text-align: center;
		font-size: 17px;
	}

	.mpvue-picker__hd:after {
		content: ' ';
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		height: 1px;
		border-bottom: 1px solid #e5e5e5;
		color: #e5e5e5;
		transform-origin: 0 100%;
		transform: scaleY(0.5);
	}

	.mpvue-picker__action {
		display: block;
		flex: 1;
		color: #1aad19;
	}

	.mpvue-picker__action:first-child {
		text-align: left;
		color: #888;
	}

	.mpvue-picker__action:last-child {
		text-align: right;
	}

	.picker-item {
		text-align: center;
		line-height: 40px;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 16px;
	}

	.mpvue-picker-view {
		position: relative;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 238px;
		background-color: rgba(255, 255, 255, 1);
	}
</style>